<template>
  <el-table :data="usersList" height="300px" @selection-change="handlerSelectionChange">
    <el-table-column type="selection" width="40" />
    <el-table-column label="姓名" prop="username"></el-table-column>
    <el-table-column label="性别">
      <template #default="scope">{{ scope.row.gender === '1' ? '男' : '女' }}</template>
    </el-table-column>
    <el-table-column label="邮箱" prop="email"></el-table-column>
    <el-table-column label="手机" prop="phone"></el-table-column>
    <el-table-column label="创建时间">
      <template #default="scope">{{
        dayjs(scope.row.ctime).format('YYYY-MM-DD HH:mm:ss')
      }}</template>
    </el-table-column>

    <el-table-column label="操作">
      <template #default="{ row }">
        <el-button type="primary" link @click="emits('edit', row._id)">编辑</el-button>
        <el-button type="danger" link @click="emits('delete', row._id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup>
import dayjs from 'dayjs';
import { ref, defineExpose } from 'vue';

import { getUsersApi } from '@/api/users';

const emits = defineEmits(['edit', 'delete']);

const usersList = ref([]);
const usersCount = ref(0);
const usersIds = ref([]);

async function getUsers(query) {
  const res = await getUsersApi(query);
  usersList.value = res.data.result;
  usersCount.value = res.data.count;
}
getUsers({
  page: 1,
  perPage: 10,
});

function handlerSelectionChange(e) {
  usersIds.value = e.map(({ _id }) => _id);
}

defineExpose({ getUsers, usersCount, usersIds });
</script>
